/*============================================================动画效果============================================================*/
/*=============================eade 淡入淡出*/
@keyframes eadeIn{ from {opacity: 0;} to {opacity: 1;} }
@keyframes eadeOut{ from {opacity: 1;} to {opacity: 0;} }
/*=============================zoomBig 由小变大*/
@keyframes zoomBigIn{ from {transform: scale(0.3); opacity: 0; } to {transform: scale(1); opacity: 1;} }
@keyframes zoomBigOut{ from {transform: scale(1); opacity: 1;} to {transform: scale(2); opacity: 0;} }
/*=============================zoomSmall 由大变小*/
@keyframes zoomSmallIn{ from {transform: scale(2); opacity: 0; } to {transform: scale(1); opacity: 1;} }
@keyframes zoomSmallOut{ from {transform: scale(1); opacity: 1;} to {transform: scale(0.5); opacity: 0;} }
/*=============================moveLeft 左移*/
@keyframes moveLeftIn{ from {right: -100%; } to {right: 0; } }
@keyframes moveLeftOut{ from {left: 0; } to {left: -100%; } }
/*=============================moveRight 右移*/
@keyframes moveRightIn{ from {left: -100%; } to {left: 0; } }
@keyframes moveRightOut{ from {right: 0; } to {right: -100%; } }
/*=============================moveUp 上移*/
@keyframes moveUpIn{ from {bottom: -100%; } to {bottom: 0; } }
@keyframes moveUpOut{ from {top: 0; } to {top: -100%; } }
/*=============================moveDown 下移*/
@keyframes moveDownIn{ from {top: -100%; } to {top: 0; } }
@keyframes moveDownOut{ from {bottom: 0; } to {bottom: -100%; } }
/*=============================slideLeft 左滑动*/
@keyframes slideLeftIn{ from {right: -100%; opacity: 0;} to {right: 0; opacity: 1;} }
@keyframes slideLeftOut{ from {left: 0; opacity: 1;} to {left: 0; opacity: 0;} }
/*=============================slideRight 右滑动*/
@keyframes slideRightIn{ from {left: -100%; opacity: 0;} to {left: 0; opacity: 1;} }
@keyframes slideRightOut{ from {right: 0; opacity: 1; } to {right: 0; opacity: 0; } }
/*=============================slideUp 上滑动*/
@keyframes slideUpIn{ from {bottom: -100%; opacity: 0;} to {bottom: 0; opacity: 1;} }
@keyframes slideUpOut{ from {top: 0; opacity: 1;} to {top: 0; opacity: 0;} }
/*=============================slideDown 下滑动*/
@keyframes slideDownIn{ from {top: -100%; opacity: 0;} to {top: 0; opacity: 1;} }
@keyframes slideDownOut{ from {bottom: 0; opacity: 1;} to {bottom: 0; opacity: 0;} }
/*=============================FlipX 水平轴翻转*/
@keyframes FlipXIn{ from {transform:rotateX(-180deg); z-index: 1;} to {transform:rotateX(0deg); z-index: 2;} }
@keyframes FlipXOut{ from {transform:rotateX(0deg); z-index: 2;} to {transform:rotateX(180deg); z-index: 1;} }
/*=============================FlipY 垂直轴翻转*/
@keyframes FlipYIn{ from {transform:rotateY(-180deg); z-index: 1; } to {transform:rotateY(0deg); z-index: 2;} }
@keyframes FlipYOut{ from {transform:rotateY(0deg); z-index: 2;} to {transform:rotateY(180deg); z-index: 1;} }
/*=============================RollLeft 向左翻动*/
@keyframes FlipLeftIn{ from {transform:rotateY(40deg) translateZ(1000px); opacity: 0; z-index: 1;} to {transform:rotateY(0deg); opacity: 1; z-index: 2;} }
@keyframes FlipLeftOut{ from {opacity: 1;} to {opacity: 0;} }
/*=============================RollRight 向右翻动*/
@keyframes FlipRightIn{ from {transform:rotateY(-40deg) translateZ(1000px); opacity: 0; z-index: 1;} to {transform:rotateY(0deg); opacity: 1; z-index: 2;} }
@keyframes FlipRightOut{ from {opacity: 1;} to {opacity: 0;} }
/*=============================RollUp 向上翻动*/
@keyframes FlipUpIn{ from {transform:rotateX(-90deg) translateZ(400px);  z-index: 2;} to {transform:rotateX(0deg); z-index: 2;} }
@keyframes FlipUpOut{ from {opacity: 1; z-index: 1;} to {opacity: 0; z-index: 1;} }
/*=============================RollDown 向下翻动*/
@keyframes FlipDownIn{ from {transform:rotateX(90deg) translateZ(400px);  z-index: 2;} to {transform:rotateX(0deg); z-index: 2;} }
@keyframes FlipDownOut{ from {opacity: 1; z-index: 1;} to {opacity: 0; z-index: 1;} }
/*=============================RollLeft 向左滚动*/
@keyframes RollLeftIn{ from {transform:rotateY(90deg); z-index: 1; } to {transform:rotateY(0deg); z-index: 1;} }
@keyframes RollLeftOut{ from {transform:rotateY(0deg); z-index: 2; } to {transform:rotateY(-90deg); z-index: 2;} }
/*=============================RollRight 向右滚动*/
@keyframes RollRightIn{ from {transform:rotateY(-90deg); z-index: 2;} to {transform:rotateY(0deg); z-index: 2;} }
@keyframes RollRightOut{ from {transform:rotateY(0deg); z-index: 1;} to {transform:rotateY(90deg); z-index: 1;} }
/*=============================RollUp 向上滚动*/
@keyframes RollUpIn{ from {transform:rotateX(-90deg); z-index: 1;} to {transform:rotateX(0deg); z-index: 1;} }
@keyframes RollUpOut{ from {transform:rotateX(0deg); z-index: 2;} to {transform:rotateX(90deg); z-index: 2;} }
/*=============================RollDown 向下滚动*/
@keyframes RollDownIn{ from {transform:rotateX(90deg); z-index: 2;} to {transform:rotateX(0deg); z-index: 2;} }
@keyframes RollDownOut{ from {transform:rotateX(0deg); z-index: 1;} to {transform:rotateX(-90deg); z-index: 1;} }